<template>
  <div id="carSaleContainer"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import { carSaleData } from "@/request/product";
let carSaleChart = null;

const createSunburst = (data) => {
  let carSaleContainer = document.getElementById("carSaleContainer");
  carSaleChart = echarts.init(carSaleContainer);
  let options = {
    color: ['#FE9901', '#99CC67', '#0166FE'],
    series: {
    type: 'sunburst',
    data: data,
    radius: ["35%", '85%'],
    label: {
      rotate: 'tangential',
      color: '#fff',
      fontSize: 26
    }
  }
  };
  carSaleChart.setOption(options);
};
onMounted(async () => {
  let {
    data: { data: carSaleChartData },
  } = await carSaleData();
  carSaleChartData = carSaleChartData.map(item => ({
    ...item, 
    name: item.carType
  }))
  createSunburst(carSaleChartData);
});

onUnmounted(() => {
  carSaleChart.dispose(carSaleChart);
  carSaleChart = null;
});
</script>

<style lang="less" scoped>
#carSaleContainer {
  width: 100%;
  height: 878px;
  padding-top: 48px;
}
</style>
